<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>过滤器</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <!-- 
    过滤器：
      定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）
      语法：
        1. 注册过滤器：Vue.filter(name, callback) 或 new Vue({filters: {}})
        2. 使用过滤器：{{ xxx | 过滤器名 }} 或 v-bind:属性 = 'xxx | 过滤器名'
      备注：
        1. 过滤器也可以接手额外参数，多个过滤器也可以串联
        2. 并没有改变原本的数据，是产生新的对应的数据
   -->
  <div id="root">
    <h2>显示格式化后的时间</h2>
    <h3>现在是{{time}}</h3>
    <!-- 计算属性实现 -->
    <h3>现在是{{fmtTime}}</h3>
    <!-- methods实现 -->
    <h3>现在是{{geFmtTime()}}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是{{time | timeFormater}}</h3>
    <!-- 过滤器实现(传参) -->
    <h3>现在是{{time | timeFormater('YYYY-MM-DD') | mySlice}}</h3>

    <h3 :x="msg | mySlice"></h3>
  </div>
  <div id="root2">
    <div>{{msg | mySlice}}</div>
  </div>
  <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
  <script>
    Vue.config.productionTip = false; // 阻止vue在启动时生成生产提示。
    // 全局过滤器
    Vue.filter('mySlice', function(value) {
      console.log('全局过滤器')
      return value.slice(0, 4)
    })

    const vm = new Vue({
      el: "#root",
      data: {
        time: 1626346719257, // 时间戳
        msg: '你好，过滤器'
      },
      // 局部过滤器
      filters: {
        timeFormater(value, str='YYYY-MM-DD HH:mm:ss') {
          return dayjs(value).format(str)
        },
        mySlice(value) {
          console.log('局部过滤器')
          return value.slice(0, 4)
        }
      },
      computed: {
        fmtTime() {
          return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
      },
      methods: {
        geFmtTime() {
          return dayjs(this.time).format('YYYY-MM-DD HH:mm:ss')
        }
      }
    })
    const vm2 = new Vue({
      el: "#root2",
      data: {
        msg: 'hello'
      }
    })

  </script>
</body>
</html>